<template>
	<div class="system-menu-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1200px">
			<el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.ruleRules" size="large" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入姓名" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="联系电话" prop="mobile">
							<el-input v-model="state.ruleForm.mobile" placeholder="请输入联系电话" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="身份证号" prop="cardNo">
							<el-input v-model="state.ruleForm.cardNo" placeholder="请输入身份证号" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="年龄" prop="age">
							<el-input v-model="state.ruleForm.age" placeholder="请输入年龄" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="mb20">
						<el-form-item label="户籍地址" prop="residenceAddress">
							<el-input v-model="state.ruleForm.residenceAddress" placeholder="请输入户籍地址" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="mb20">
						<el-form-item label="居住地址" prop="homeAddress">
							<el-input v-model="state.ruleForm.homeAddress" placeholder="请输入居住地址" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="state.ruleForm.email" placeholder="请输入邮箱" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="配偶" prop="spouse">
							<el-input v-model="state.ruleForm.spouse" placeholder="请输入配偶" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="子女" prop="children">
							<el-input v-model="state.ruleForm.children" placeholder="请输入子女" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="公司" prop="company">
							<el-input v-model="state.ruleForm.company" placeholder="请输入公司" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="职务" prop="duties">
							<el-input v-model="state.ruleForm.duties" placeholder="请输入职务" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="收入情况" prop="incomeSituation">
							<el-input v-model="state.ruleForm.incomeSituation" placeholder="请输入收入情况" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="社保" prop="socialSecurity">
							<el-input v-model="state.ruleForm.socialSecurity" placeholder="请输入社保" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="公积金" prop="accumulationFund">
							<el-input v-model="state.ruleForm.accumulationFund" placeholder="请输入公积金" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="养老金" prop="oldAgePension">
							<el-input v-model="state.ruleForm.oldAgePension" placeholder="请输入养老金" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="退休金" prop="pension">
							<el-input v-model="state.ruleForm.pension" placeholder="请输入退休金" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="医保" prop="medicalInsurance">
							<el-input v-model="state.ruleForm.medicalInsurance" placeholder="请输入医保" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="微信账号" prop="wechat">
							<el-input v-model="state.ruleForm.wechat" placeholder="请输入微信账号" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="性别" prop="sex">
							<el-radio-group v-model="state.ruleForm.sex">
                        		<el-radio-button :label="0">未知</el-radio-button>
                        		<el-radio-button :label="1">男</el-radio-button>
                        		<el-radio-button :label="2">女</el-radio-button>
                        	</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
						<el-form-item label="婚姻状况" prop="isMarry">
							<el-radio-group v-model="state.ruleForm.isMarry">
                        		<el-radio-button :label="0">未婚</el-radio-button>
                        		<el-radio-button :label="1">已婚</el-radio-button>
                        	</el-radio-group>
						</el-form-item>
					</el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
						<el-form-item label="是否限高" prop="heightLimit">
							<el-radio-group v-model="state.ruleForm.heightLimit">
                        		<el-radio-button :label="0">否</el-radio-button>
                        		<el-radio-button :label="1">是</el-radio-button>
                        	</el-radio-group>
						</el-form-item>
					</el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
						<el-form-item label="是否失信" prop="dishonesty">
							<el-radio-group v-model="state.ruleForm.dishonesty">
                        		<el-radio-button :label="0">否</el-radio-button>
                        		<el-radio-button :label="1">是</el-radio-button>
                        	</el-radio-group>
						</el-form-item>
					</el-col>
                </el-row>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cgpersonForm">
import { reactive, defineAsyncComponent,onMounted, ref ,unref,nextTick} from 'vue';
import { getinfo,save } from '/@/api/cgperson/index';
import {  ElMessage } from 'element-plus';


// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
const Uploadimg = defineAsyncComponent(() => import('/@/components/Upload/singleImage.vue'));
const Uploadvedio = defineAsyncComponent(() => import('/@/components/Upload/vedio.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);


// 定义变量内容
const activeName = ref('first');
const dialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id:'',
		name:'',
		mobile:'',
		cardNo:'',
		sex:'',
		age:'',
		residenceAddress:'',
		homeAddress:'',
		email:'',
		isMarry:'',
		spouse:'',
		children:'',
		company:'',
		duties:'',
		incomeSituation:'',
		socialSecurity:'',
		accumulationFund:'',
		oldAgePension:'',
		pension:'',
		medicalInsurance:'',
		wechat:'',
		heightLimit:'',
		dishonesty:'',
	},
	
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	// 表单校验
	ruleRules:  { 
    name: [{ required: true, message: 'name不能为空', trigger: 'blur' }],
  },
	loading: false,
	msg:'最佳尺寸100*100',
});


const onUpload = (data) => {
	state.ruleForm.img = data;
};

const onUploadvedio = (data) => {
	state.ruleForm.video = data;
};

// 打开弹窗
const openDialog = (type: string, row?: any) => {
	if (type === 'edit') {
		// 实际请走接口
		getinfo(row.id).then((response: any) => {
			state.ruleForm.id = response.data.id;
			state.ruleForm.name = response.data.name;
			state.ruleForm.mobile = response.data.mobile;
			state.ruleForm.cardNo = response.data.cardNo;
			state.ruleForm.sex = response.data.sex;
			state.ruleForm.age = response.data.age;
			state.ruleForm.residenceAddress = response.data.residenceAddress;
			state.ruleForm.homeAddress = response.data.homeAddress;
			state.ruleForm.email = response.data.email;
			state.ruleForm.isMarry = response.data.isMarry;
			state.ruleForm.spouse = response.data.spouse;
			state.ruleForm.children = response.data.children;
			state.ruleForm.company = response.data.company;
			state.ruleForm.duties = response.data.duties;
			state.ruleForm.incomeSituation = response.data.incomeSituation;
			state.ruleForm.socialSecurity = response.data.socialSecurity;
			state.ruleForm.accumulationFund = response.data.accumulationFund;
			state.ruleForm.oldAgePension = response.data.oldAgePension;
			state.ruleForm.pension = response.data.pension;
			state.ruleForm.medicalInsurance = response.data.medicalInsurance;
			state.ruleForm.wechat = response.data.wechat;
			state.ruleForm.heightLimit = response.data.heightLimit;
			state.ruleForm.dishonesty = response.data.dishonesty;

		});
		
		state.dialog.title = '修改';
		state.dialog.submitTxt = '修 改';
	} else {
		state.dialog.title = '新增';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
		nextTick(() => {
			dialogFormRef.value.resetFields();
			initForm();
		});
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	// 查询
	
};
// 关闭弹窗
const closeDialog = () => {
	initForm();
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {

	const formWrap = unref(dialogFormRef) as any;
	if (!formWrap) return;
	formWrap.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			save(state.ruleForm)
				.then(() => {
					ElMessage.success('保存成功');
					state.loading = false;
					closeDialog(); // 关闭弹窗
					emit('refresh');
				})
				.finally(() => {
					state.loading = false;
				});
		}
	})
};
// 页面加载时
onMounted(() => {
	
});


// 表单初始化，方法：`resetFields()` 无法使用
const initForm = () => {
	state.ruleForm.id = '';
	state.ruleForm.name = '';
	state.ruleForm.mobile = '';
	state.ruleForm.cardNo = '';
	state.ruleForm.sex = '';
	state.ruleForm.age = '';
	state.ruleForm.residenceAddress = '';
	state.ruleForm.homeAddress = '';
	state.ruleForm.email = '';
	state.ruleForm.isMarry = '';
	state.ruleForm.spouse = '';
	state.ruleForm.children = '';
	state.ruleForm.company = '';
	state.ruleForm.duties = '';
	state.ruleForm.incomeSituation = '';
	state.ruleForm.socialSecurity = '';
	state.ruleForm.accumulationFund = '';
	state.ruleForm.oldAgePension = '';
	state.ruleForm.pension = '';
	state.ruleForm.medicalInsurance = '';
	state.ruleForm.wechat = '';
	state.ruleForm.heightLimit = '';
	state.ruleForm.dishonesty = '';

};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
